<template>
    <div class="internal">
        <return-internal :title="$route.params.item"></return-internal>
            <div class="doctorFollow">
            <div
              v-for="(item, index) in doctor"
              :key="index"
              @click="doctorAction(item.name, item.img, item.job, item.able, index)"
            >
            <div v-if="name.includes(item.name)" class="border-bottom">
              <img :src="item.img" alt="" />
              <p>
                <span>{{ item.name }}</span
                ><span>{{ item.job }}</span
                >
                <button>已关注</button>
                <br />
                {{ item.able }}
              </p>
            </div>
            </div>
          </div>
    </div>
</template>

<script>
import { numFollowApi } from "../../../api/follow";
export default {
    data() {
        return {
              show: false,
              name: [],
              doctor: [
                {
                    img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u154.png",
                    name: "杨爱明",
                    job: "主任医师  消化内科",
                    able: "擅长 : 食管胃底静脉曲张，胃早期癌，胆石症，胰腺癌，慢性胰腺炎，胆管癌，ERCP，超声内镜",
                },
                {
                    img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u156.png",
                    name: "李单青",
                    job: "主任医师  胸外科",
                    able: " 擅长 ：肺部肿瘤、食管癌、胃贲门癌、各种食管良性病变、纵隔良恶性肿瘤",
                },
                {
                    img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u168.png",
                    name: "李莹",
                    job: "主任医师  眼科",
                    able: "擅长 : 近视手术、角膜移植手术，角膜紫外交联手术。各种激光屈光手术后并发症，难治角膜病",
                },
            ],
        }
    },
    methods: {
        doctorAction(text, img, job, able, index) {
            let space = job.indexOf(" ");
            let job1 = job.slice(0, space);
            let job2 = job.slice(space + 1);
            this.$router.push({
                name: "doctor",
                params: { text, img, job1, job2, able },
            });
        }, 
         async numfollow() {
            try {
                const { data } = await numFollowApi()
                this.follows = data.data.length
                data.data.map(item => {
                    this.name.push(item.name)
                })
                console.log(this.name);
            } catch (error) {
                console.log(error);
            }
        }
    },
   created() {
    this.numfollow()
   }
}
</script>

<style scope lang="scss">
@function vw($px) {
  @return ($px/375) * 100vw;
}
* {
  margin: 0;
  padding: 0;
}
 .doctorFollow {
    margin-top: vw(45);
      div {    
        background: #fff;
        display: flex;
        img {
          margin-left: vw(10);
          margin-top: vw(20);
          width: vw(50);
          height: vw(50);
        }
        p {
          flex: 1;
          font-size: vw(10);
          transform: scale(0.8);
          color: #999999;
          line-height: vw(28);
          position: relative;
          span:first-child {
            font-size: vw(16);
            color: #333;
            line-height: vw(28);
          }
          span:nth-child(2) {
            margin-left: vw(30);
            font-size: vw(16);
            color: #999999;
            line-height: vw(28);
          }
          button{
            position: absolute;
            right: 0;
            border:vw(1) solid #2ec7c9;
            background: transparent;
            border-radius: vw(20);
            color: #2ec7c9;
            width: vw(60);
            height: vw(25);
            line-height: vw(25);
          }
        }
      }
    }
</style>